<template>
  <div class="message">
    <van-nav-bar title="消息" fixed />
    
    <div class="message-list">
      <van-cell-group>
        <van-cell
          v-for="i in 10"
          :key="i"
          :title="`消息 ${i}`"
          :label="`这是消息 ${i} 的详细内容`"
          center
          is-link
        >
          <template #icon>
            <van-badge :content="i">
              <van-image
                round
                width="40"
                height="40"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              />
            </van-badge>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { CellGroup, Cell, Badge, Image as VanImage } from 'vant'
</script>

<style scoped>
.message {
  padding-top: 46px;
  padding-bottom: 50px;
}

.message-list {
  background: #fff;
}
</style> 